<template>
	<div class="bg-white px-3 goods_create" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">
		<router-link :to="{name: 'shop_goods_list'}"
		style="position: absolute;top: 12px;left: 200px;">
			<el-button type="primary" size="mini">回到商品列表</el-button>
		</router-link>
		

		<el-form label-width="80px">
			<el-form-item label="商品规格">
				<el-radio-group :value="sku_type" @input="vModel('sku_type', $event)">
					<el-radio-button :label="0" size="medium" >单规格</el-radio-button>
					<el-radio-button :label="1" size="medium" >多规格</el-radio-button>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<!-- 单规格 -->
		<template v-if="sku_type === 0">
			<el-form label-width="80px">
				<el-form-item label="市场价格">
					<el-input v-model="sku_value.oprice" class="w-25" type="number" placeholder="市场价格"></el-input>
				</el-form-item>
				<el-form-item label="销售价格">
					<el-input v-model="sku_value.pprice" class="w-25" type="number" placeholder="市场价格"></el-input>
				</el-form-item>
				<el-form-item label="成本价格">
					<el-input v-model="sku_value.cprice" class="w-25" type="number" placeholder="市场价格"></el-input>
				</el-form-item>
				<el-form-item label="商品重量">
					<el-input v-model="sku_value.weight" class="w-25"  placeholder="商品重量">
						<template slot="append">公斤</template>
					</el-input>
				</el-form-item>
				<el-form-item label="商品体积">
					<el-input v-model="sku_value.volume" class="w-25"  placeholder="商品体积">
						<template slot="append">立方米</template>
					</el-input>
				</el-form-item>
			</el-form>
		</template>
		<!-- 多规格 -->
		<template v-if="sku_type === 1">
			<!-- 规格卡片 -->
			<el-form  label-width="80px">
				<el-form-item label="添加规格">
					<sku-card v-for="(item, index) in sku_card" :key="index"
					:item="item" :index="index"
					:total="skuCardTotal">
					</sku-card>
					
					<el-button type="success" size="mini"
					@click="addSkuCardEvent">添加规格</el-button>
				</el-form-item>
			</el-form>
			<el-form label-width="80px">
				
				<el-form-item label="批量设置">
					<el-button :type="item.key === currentUpdateKey ? 'primary': 'text'"
					v-for="(item, index) in updateList" :key="index"
					@click="openUpdateAllStatus(item)"
					size="small">
						{{item.name}}
					</el-button>
					
					
					<div class="d-flex align-items-center">
						<el-input size="small" type="number" 
						v-model="updateAllValue"
						:placeholder="updateAllPlaceHolder" style="width: 150px;"></el-input>
						<el-button class="ml-2" size="small" type="primary"
						@click="updateAllSubmit">设置</el-button>
						
					</div>
				</el-form-item>
				
				<el-form-item label="规格设置">
					<sku-table ref="table"></sku-table>
				</el-form-item>
			</el-form>
		</template>
		
		<el-button type="primary" style="position: fixed;right: 50px;bottom: 50px;"
		@click="submit">提交</el-button>
		
	</div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import singleAttrs from "@/components/shop/create/single-attrs.vue";
import skuCard from "@/components/shop/create/sku/sku-card.vue";
import skuTable from "@/components/shop/create/sku-table.vue";

export default {
	
	inject:['app', 'layout'],
	
	components: {
		singleAttrs,
		skuCard,
		skuTable,
	},

	computed: {
		...mapState({
			sku_type: state => state.goodsCreate.sku_type,
			sku_card: state => state.goodsCreate.sku_card,
		}),
		//规格卡片总数
		skuCardTotal() {
			return this.sku_card.length
		},
		//当前设置的字段的key或者说是name
		currentUpdateFieldActive(item) {
			if(this.currentUpdateKey === ''){
				return item.key === this.updateList[0].key
			}
			return this.currentUpdateKey === item.key
		}
	},
	
	created() {
		this.id = this.$route.params.id
		if(!this.id) {
			this.$message({
				message: '非法参数',
				type: 'error'
			});
			return this.$router.push({
				name: "shop_goods_list"
			})
		}
		//获取之前的商品详情
		this.layout.showLoading()
		let defaultValue = ['属性值', '#FFFFFF', '/favicon.ico']
		this.axios.get('/admin/goods/read/' + this.id, {token: true}).then(res => {
			let data = res.data.data
			console.log('data', data)
			this.sku_value = data.sku_value ? data.sku_value : {
				oprice: 0,
				pprice: 0,
				cprice: 0,
				weight: 0,
				volume: 0
			}
			let arr = data.goodsSkusCard.map(v => {
				v['list'] = v.goodsSkusCardValue
				v.list.map(v => {
					v.text = item.type === 0 ? v.value : defaultValue[0]
					v.color = item.type === 1 ? v.value : defaultValue[1]
					v.image = item.type === 2 ? v.value : defaultValue[2]
					return v
				})
				return v
			})
			console.log(arr)
			this.vModel('sku_card', arr)
			this.vModel('sku_type', data.sku_type)
			
			
			this.$nextTick(() => {
				if(this.$refs.table) {
					this.$refs.table.list = data.goodsSkus
				}
			})
			
			this.layout.hideLoading()
		}).catch(err => {
			this.layout.hideLoading()
		})
	},
	
	data() {
		return {
			id: 0,
			
			//单规格
			sku_value: {
				oprice: 0,
				pprice: 0,
				cprice: 0,
				weight: 0,
				volume: 0
			},
			
			//批量修改
			currentUpdateKey: 'pprice',
			updateList: [
				{name: '销售价', key: 'pprice'},
				{name: '市场价', key: 'oprice'},
				{name: '成本价', key: 'cprice'},
				{name: '库存', key: 'stock'},
				{name: '体积', key: 'volume'},
				{name: '重量', key: 'weight'},
			],
			updateAllPlaceHolder: '',
			
			updateAllValue: ''
		}
	},
	
	methods: {
		//submit() 
		submit() {
			let list = []
			if (this.$refs.table) {
				list = this.$refs.table.list.map(item => {
					item.goods_id = this.id
					return item
				})
			} 
			this.layout.showLoading()
			this.axios.post('/admin/goods/updateskus/' + this.id, {
				sku_type: this.sku_type,
				sku_value: this.sku_value,
				goodsSkus: list
			}, {token: true}).then(res => {
				this.$router.push({
					name: "shop_goods_list"
				})
				this.$message({
					message: '保存商品规格成功',
					type: 'success'
				});
				this.layout.hideLoading()
			}).catch(err => {
				this.layout.hideLoading()
			})
		},
		
		//addSkuCardEvent
		addSkuCardEvent() {
			this.layout.showLoading()
			this.axios.post('/admin/goods_skus_card', {
				goods_id: this.id,
				name: "规格名称",
				order: 50,
				type: 0,
			}, {token: true}).then(res => {
				let data = res.data.data
				console.log('新增规格', data)
				data.list = []
				this.addSkuCard(data)
				this.$message({
					message: '新增一条规格成功',
					type: 'success'
				});
				this.layout.hideLoading()
			}).catch(err => {
				this.layout.hideLoading()
			})
		},
		
		...mapMutations(['vModelState','addSkuCard', 'vModelGoodsAttrs']),
		//修改表单数据
		vModel(key, value) {
			this.vModelState({key: key,value: value})
		},
		
		//修改批量设置
		openUpdateAllStatus(item) {
			this.currentUpdateKey  = item.key
			this.updateAllPlaceHolder = '填写:' + item.name
			this.updateAllValue = ''
		},
		
		//提交批量设置
		updateAllSubmit() {
			this.$refs.table.list.forEach(item => {
				item[this.currentUpdateKey] = this.updateAllValue
			})
		},
		
	},
	

}
</script>

<style>
	.goods_create .el-form-item{
		margin-bottom: 15px;
	}
</style>
